<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button id="btn">打开/创建database</button>
<script>
  const openDatabase = function () {
    // 如果数据库不存在，open 操作会创建该数据库,第二个参数指定数据库的版本
    const request = window.indexedDB.open('MyFirstDatabase', 1)
    let db = null
    request.onsuccess = function (event) {
      console.log('database success', event)
      // 获取结果
      db = event.target.result
      console.log('database result', db)
      // 错误事件遵循冒泡机制。错误事件都是针对产生这些错误的请求的，然后事件冒泡到事务，然后最终到达数据库对象
      // 如果你希望避免为所有的请求都增加错误处理程序，你可以替代性的仅对数据库对象添加一个错误处理程序
      db.onerror = function (event) {
        console.log('Database error: ', event.target.errorCode)
      }
    }
    request.onerror = function (event) {
      console.log('database fail', event)
    }
  }
  btn.addEventListener('click', openDatabase)
</script>
</body>
</html>
